﻿@{
    ViewBag.Title = "Chat";
}
<div class="container" style="margin-top: 20px;">
    <div class="row" style="height: 500px;">
        <div class="col-xs-3">
            <div id="contact-list" class="list-group">

            </div>
        </div>
        <div id="msg" class="col-xs-9" style="height: 500px; overflow: auto;">

        </div>
    </div>
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-9">
            <form id="msg-form">
                <div class="input-group">
                    <input id="message" type="text" class="form-control" style="max-width: 2000px;">
                    <span class="input-group-btn">
                        <input class="btn btn-default" type="submit" value="Send">
                    </span>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/bundles/app")

    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="~/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    <script>
        $(function () {
            var addMessage = function (msg) {
                var $msg;
                if (msg.toId == currentUser.id) {
                    $msg = $('<div class="alert alert-info" style="margin-left: 100px;" role="alert"></div>');
                } else {
                    $msg = $('<div class="alert alert-success" style="margin-right: 100px;" role="alert"></div>');
                }
                $msg.html(msg.text).appendTo("#msg");
                var elem = document.getElementById('msg');
                elem.scrollTop = elem.scrollHeight;
            }

            var hub = $.connection.messageHub;
            hub.client.addMessage = function (msg) {
                console.log(msg);
                if ((msg.FromId == currentUser.id) && (msg.FromId != msg.ToId)) {
                    addMessage({ fromId: msg.FromId, toId: msg.ToId, text: msg.Text });
                }
            };

            var currentUser;

            var loadMessages = function (uid) {
                $.ajax({ url: "/api/Messages/" + uid, headers: { "Authorization": "Bearer " + sessionStorage.getItem("accessToken") } }).done(
                    function (messages) {
                        var $msg = $("#msg").html("");
                        messages.forEach(addMessage);
                    });
            }

            $.ajax({ url: "/api/Users", headers: { "Authorization": "Bearer " + sessionStorage.getItem("accessToken") } }).done(
                function (users) {
                    users.forEach(function (user) {
                        var $a = $('<a href="#" class="list-group-item">' + user.name + '</a>').appendTo("#contact-list");
                        $a.click(function () {
                            currentUser = user;
                            console.log(currentUser);

                            $(".list-group > a").removeClass("active");
                            $a.addClass("active");

                            loadMessages(user.id);
                        });
                    });
                });

            $.connection.hub.start().done(function () {
                $("#msg-form").submit(function () {
                    var text = $('#message').val();
                    hub.server.send(currentUser.id, text);
                    addMessage({ text: text, toId: currentUser.id });
                    $('#message').val('').focus();
                });
            });
        });
    </script>
}